<!-- Dom模板 -->
<template>
  <div class="music-boxes">
    <!-- Dom内容 -->
    <div class="music-box">
      <div class="music-top">
        <p class="iconfont icon-xialacaidanxia" @click="fan"></p>
        <div style="width: 68vw; background-color: #6c8c93">
          <van-tabs @click="handleClick()" v-model="active">
            <van-tab
              :title="item"
              v-for="(item, index) in musicTop"
              :key="index"
              >{{ item.name }}</van-tab
            >
          </van-tabs>
        </div>
        <p class="iconfont icon-zhuanfa"></p>
      </div>
      <div>
     
          <components :is="components"></components>
     
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import all from "./all.vue";
import pinglun from "./pinglun.vue";
import simile from "./simile.vue";
export default {
  data() {
    return {
      msg: "测试",
      musicTop: ["音频", "评论", "相似"],
      active: 0,
      components: "all",
    };
  },
   components: {
    all,
    pinglun,
    simile,
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    handleClick() {
      if (this.active === 0) {
        this.components = "all";
        // console.log(this.components)
      } else if (this.active === 1) {
        this.components = "pinglun";
      } else {
        this.components = "simile";
      }
    },
    fan() {
       if(this.$route.query.path){
         this.$router.history.push({
               path:this.$route.query.path,
               query:{
                 path:this.$route.query.beforePath
               }
             })
       }else{
         this.$router.history.push("/home/tui")
       }
        //      '/details')
        //   //  log
        //  }else{
        //      this.$router.history.push({
        //        path:this.$route.query.path,
        //        query:{
        //          path:this.$route.query.beforePath
        //        }
        //      })
             
        //  }
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.music-boxes {
  width: 100%;
  height: 100vh;
  z-index: 100;
  position: fixed;
}
.alert {
  width: 100%;
  height: 100%;
  background: white;
}
.music-box {
  width: 100%;
  background: #6c8c93 100%;
  /* background: #6c8c93 ; */
  height: 100vh;
  overflow: auto;
}
.music-top {
  width: 100%;
  height: 1.173333rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(255, 255, 255, 49);
  font-size: 0.426667rem;
  text-align: center;
  font-family: PingFangSC-regular;
  /* border-bottom: 1px solid white; */
  /* position: fixed;
  top: 0;
  left: 0; */
  background: #6c8c93 100%;
  /* z-index: 8000; */
}
.music-top p {
  width: 30%;
  font-size: 0.533333rem;
}

.music-top .el-tabs {
  /* width: 75%; */
  height: 1.03333rem;
}
.music-top .el-tabs .el-tab-pane:nth-child(1) {
  color: white;
}
.music-top .el-tabs__nav-scroll {
  border: none;
  height: 1rem;
}
.music-top .el-tabs__active-bar {
  background-color: white;
}
.music-top .el-tabs__item:hover {
  color: white;
}

.music-top .el-tabs__nav-wrap::after {
  background: #6c8c93 100%;
}
.music-top .el-tabs__active-bar {
  background-color: white;
  height: 0.08rem;
}
.music-top .el-tabs__item.is-active {
  color: white;
}
.music-top .el-tabs__nav-scroll .el-tabs__active-bar #tab-0 {
  color: white;
}
</style>
<style>
.music-top .van-tabs {
  width: 100%;
  color: white;
}
.music-top .van-tab {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.373333rem;
}
.music-top .van-tab__text--ellipsis {
  color: white;
  font-size: 14px;
}
.music-top .van-tabs__line {
  background-color: white;
  width: 0.666667rem;
}
.music-top .van-tabs__nav {

  background-color: #6c8c93;
}
</style>